<div class="theme-options-panel" notaddPerfectScrollbar>
    <form [formGroup]="form" class="h-60-p">
        <!-- layout style-->
        <mat-tab-group formGroupName="layout" class="theme-panel" color="accent">

            <!-- layout width -->
            <mat-tab *ngIf="!isMobile" label="{{'ThemePanel.LayoutWidth' | translate}}">
                <div class="group">

                    <h3 class="ml-12">{{'ThemePanel.LayoutWidth' | translate}}</h3>
                    <mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="width">
                        <mat-radio-button class="ml-12 mb-12" value="fullwidth">Fullwidth</mat-radio-button>
                        <mat-radio-button class="ml-12 mb-12" value="boxed">Boxed</mat-radio-button>
                    </mat-radio-group>

                </div>
            </mat-tab>

            <!-- toolbar -->
            <mat-tab label="{{'ThemePanel.Toolbar.Title' | translate}}">
                <div class="group" formGroupName="toolbar">

                    <h3 class="ml-12" fxHide fxShow.gt-xs fxLayout="row nowrap" fxLayoutAlign="space-between center">
                        <span>{{'ThemePanel.Toolbar.Hidden' | translate}}</span>
                        <mat-slide-toggle class="mr-12" formControlName="hidden"></mat-slide-toggle>
                    </h3>

                    <h3 class="ml-12" fxHide fxShow.gt-xs>{{'ThemePanel.Toolbar.Position' | translate}}</h3>
                    <mat-radio-group class="ml-12" fxLayout="column" fxLayoutAlign="start start" formControlName="position" fxHide fxShow.gt-xs>
                        <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
                        <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
                        <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                    </mat-radio-group>

                    <h3 class="ml-12 mt-16">{{'ThemePanel.Toolbar.Background' | translate}}</h3>
                    <notadd-material-color-picker class="ml-12" formControlName="background">
                    </notadd-material-color-picker>

                </div>
            </mat-tab>

            <!-- navbar -->
            <mat-tab label="{{'ThemePanel.Navbar.Title' | translate}}">
                <div class="group" formGroupName="navbar">

                    <h3 class="ml-12" fxHide fxShow.gt-xs fxLayout="row nowrap" fxLayoutAlign="space-between center">
                        <span>{{'ThemePanel.Navbar.Hidden' | translate}}</span>
                        <mat-slide-toggle class="mr-12" formControlName="hidden"></mat-slide-toggle>
                    </h3>

                    <h3 class="ml-12" fxLayout="row nowrap" fxLayoutAlign="space-between center">
                        <span>{{'ThemePanel.Navbar.Collapsed' | translate}}</span>
                        <mat-slide-toggle class="mr-12" formControlName="collapsed"></mat-slide-toggle>
                    </h3>

                    <h3 class="ml-12" fxHide fxShow.gt-xs>{{'ThemePanel.Navbar.Position' | translate}}</h3>
                    <mat-radio-group class="ml-12" fxLayout="column" fxLayoutAlign="start start" formControlName="position" fxHide fxShow.gt-xs>
                        <mat-radio-button class="mb-12" value="start">Left</mat-radio-button>
                        <mat-radio-button class="mb-12" value="end">Right</mat-radio-button>
                    </mat-radio-group>

                    <h3 class="ml-12 mt-16">{{'ThemePanel.Navbar.Color' | translate}}</h3>
                    <div>
                        <notadd-material-color-picker class="ml-12 mb-16" formControlName="secondaryBackground"></notadd-material-color-picker>
                        <notadd-material-color-picker class="ml-12 mb-16" formControlName="background"></notadd-material-color-picker>
                    </div>

                </div>

            </mat-tab>

            <!-- footer -->
            <mat-tab label="{{'ThemePanel.Footer.Title' | translate}}">
                <div class="group mt-24" formGroupName="footer">

                    <h3 class="ml-12" fxLayout="row nowrap" fxLayoutAlign="space-between center">
                        <span>{{'ThemePanel.Footer.Hidden' | translate}}</span>
                        <mat-slide-toggle class="mr-12" formControlName="hidden"></mat-slide-toggle>
                    </h3>

                    <h3 class="ml-12" fxHide fxShow.gt-xs>{{'ThemePanel.Footer.Position' | translate}}</h3>
                    <mat-radio-group class="ml-12" fxLayout="column" fxLayoutAlign="start start" formControlName="position" fxHide fxShow.gt-xs>
                        <mat-radio-button class="mb-12" value="above">Above</mat-radio-button>
                        <mat-radio-button class="mb-12" value="below-static">Below Static</mat-radio-button>
                        <mat-radio-button class="mb-12" value="below-fixed">Below Fixed</mat-radio-button>
                    </mat-radio-group>

                    <h3 class="ml-12 mt-16">{{'ThemePanel.Footer.Background' | translate}}</h3>
                    <notadd-material-color-picker class="ml-12 mb-16" formControlName="background"></notadd-material-color-picker>

                </div>
            </mat-tab>
        </mat-tab-group>
    </form>
    <div fxLayout="row wrap" fxLayoutAlign="center center">
        <button class="w-80-p" (click)="resetConfig()" mat-raised-button color="accent">重置主题配置</button>
    </div>
</div>
